<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .snake {
            width: 10px;
            height: 10px;
            background-color: green;
            position: absolute;
        }
        .food {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <script>
        const gameBoard = document.getElementById('game-board');
        let snake = [{x: 10, y: 10}];
        let food = {x: 200, y: 200};
        let dx = 10;
        let dy = 0;

        function drawSnake() {
            gameBoard.innerHTML = '';
            snake.forEach(segment => {
                const snakeElement = document.createElement('div');
                snakeElement.style.left = segment.x + 'px';
                snakeElement.style.top = segment.y + 'px';
                snakeElement.classList.add('snake');
                gameBoard.appendChild(snakeElement);
            });
        }

        function drawFood() {
            const foodElement = document.createElement('div');
            foodElement.style.left = food.x + 'px';
            foodElement.style.top = food.y + 'px';
            foodElement.classList.add('food');
            gameBoard.appendChild(foodElement);
        }

        function moveSnake() {
            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
            snake.unshift(head);
            if (head.x === food.x && head.y === food.y) {
                food.x = Math.floor(Math.random() * 40) * 10;
                food.y = Math.floor(Math.random() * 40) * 10;
            } else {
                snake.pop();
            }
        }

        function changeDirection(event) {
            const LEFT_KEY = 37;
            const UP_KEY = 38;
            const RIGHT_KEY = 39;
            const DOWN_KEY = 40;

            const keyPressed = event.keyCode;

            if (keyPressed === LEFT_KEY && dx !== 10) {
                dx = -10;
                dy = 0;
            }

            if (keyPressed === UP_KEY && dy !== 10) {
                dx = 0;
                dy = -10;
            }

            if (keyPressed === RIGHT_KEY && dx !== -10) {
                dx = 10;
                dy = 0;
            }

            if (keyPressed === DOWN_KEY && dy !== -10) {
                dx = 0;
                dy = 10;
            }
        }

        document.addEventListener('keydown', changeDirection);

        function main() {
            setTimeout(function onTick() {
                moveSnake();
                drawSnake();
                drawFood();
                main();
            }, 100);
        }

        main();
    </script>
</body>
</html>
